<script setup>
import { ref } from 'vue'

const centerDialogVisible = ref(false)
const localCameraVideo = ref()

const getUserMedia = (constrains) => {
  if (window.navigator.mediaDevices.getUserMedia) {
    console.log('window.navigator.mediaDevices.getUserMedia')
    return window.navigator.mediaDevices.getUserMedia(constrains)
  } else if (window.navigator.webkitGetUserMedia) {
    console.log('window.navigator.webkitGetUserMedia')
    return window.navigator.webkitGetUserMedia(constrains)
  } else if (window.navigator.mozGetUserMedia) {
    console.log('window.navigator.mozGetUserMedia')
    return window.navigator.mozGetUserMedia(constrains)
  } else if (window.navigator.getUserMedia) {
    console.log('window.navigator.getUserMedia')
    return window.navigator.getUserMedia(constrains)
  }
  throw new Error('unable to get user media')
}

const btnClick = () => {
  getUserMedia({
    audio: true,
    video: { width: 1280, height: 720 }
  })
    .then((userMedia) => {
      localCameraVideo.value.srcObject = userMedia
      localCameraVideo.value.play()
    })
    .catch((er) => {
      console.log(er.name)
    })
  centerDialogVisible.value = true
}
</script>

<template>
  <el-button @click="btnClick">视频会议</el-button>

  <el-dialog
    v-model="centerDialogVisible"
    title="视频面试"
    width="700"
    aling-center
  >
    <div style="height: 500px; text-align: center">
      <video ref="localCameraVideo" width="100%" height="100%" autoplay></video>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
